<template>
  <view class="add-reject-reply-container">
    <!-- 文本框 -->
    <view class="input-container">
		 <text class="input-title">自定义回复语</text>
      <textarea
        class="reply-input"
        placeholder="以下内容将通过消息的方式回复"
        v-model="replyContent"
		maxlength="200"
      ></textarea>

 <!-- 字数统计 -->
      <view class="word-count">{{ replyContent.length }}/200</view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="saveReply">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      replyContent: '' // 用户输入的回复语内容
    };
  },
  methods: {
    // 保存回复语
    saveReply() {
      if (this.replyContent.trim() === '') {
        uni.showToast({
          title: '回复语不能为空',
          icon: 'none'
        });
        return;
      }

      // 将回复语内容传回至上一页面
      const eventChannel = this.getOpenerEventChannel();
      if (eventChannel) {
              eventChannel.emit('addCustomReply', {
                content: this.replyContent
              });
            }  else {
			  console.error('eventChannel 未初始化');
			  uni.showToast({
				title: '数据传输失败，请重试',
				icon: 'none'
			  });
			}
	

      // 返回上一页面
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.add-reject-reply-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #fff;
}

.input-container {
  /* flex: 1; */
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
}

.input-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.reply-input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  min-height: 200rpx;
}

.word-count {
  position: absolute;
  bottom: 10rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.save-button-container {
  padding: 20rpx;
  background-color: #fff;
}

.save-button {
		width: 100%;
 		height: 80rpx;
 		line-height: 80rpx;
		background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
		border-radius: 32px;
 		font-size: 32rpx;
 		color: #fff;
 		text-align: center;
 		pointer-events: auto; /* 确保用户交互正常 */
}
</style>